<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
		<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
		<link th:href="@{/css/myself.css}" rel="stylesheet" type="text/css"/>
		<!--<link th:href="@{/css/pill.css}" rel="stylesheet" type="text/css"/>-->

		<script th:src="@{/bootstrap/js/bootstrap.js} "></script>

		<script type="text/javascript">
			//checkbox 全选/取消全选
			var isCheckAll = false;
			function swapCheck() {
				if (isCheckAll) {
					$("input[type='checkbox']").each(function() {
						this.checked = false;
					});
					isCheckAll = false;
				} else {
					$("input[type='checkbox']").each(function() {
						this.checked = true;
					});
					isCheckAll = true;
				}
			}
		</script>
		<script type="text/javascript">
			$(function () {
				var $del=$("#delete");
				$del.click(function () {
					var $form=$("#form");
					$form.submit();
				});

			});
		</script>
	</head>
	<body style="background-color: #F5FDF9;">

		<!-- 导航栏部分 -->
		<div th:replace="~{manager/common/commons::topbar}"></div>


		<!-- 主体部分 -->
		<div style="margin-top: 5px;width: 100%;position:absolute;top:63px;bottom: 0;">
			<!-- 左导航栏 -->
			<div th:replace="~{manager/common/commons::left}"></div>
			<!--显示部分-->

			<div style="width: 85%;text-align: center;margin-top: 5px;float: left;">
				<!-- 第一行 -->
				<div style="width:100%;margin-top: 5px;padding: 3px;">
					<div style="float: left;margin-right: 10px;margin-bottom: 5px;"><a  class="btn btn-danger" style="outline: none;" id="delete" >批量删除</a></div>
					<form th:action="@{/manager/select}">
					<div style="float: left;line-height: 30px;margin-right: 5px;margin-left: 180px;">
						<p style="float: left;">
							ID：
						</p>
						<input placeholder="请输入用户编号" name="id" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;line-height: 30px;margin-right: 5px;">
						<p style="float: left;">
							名称：
						</p>
						<input placeholder="请输入用户名称" name="username" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;line-height: 30px;margin-right: 5px;">
						<p style="float: left;">
							地址：
						</p>
						<input placeholder="请输入用户住址" name="address" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;">
						<input type="submit" class="btn btn-info" style="outline: none;" value="查询"/>
					</div>
					</form>
				</div>


			<form id="form" th:action="@{/manager/delete_all}">
				<!-- 表格信息-->
			<div>
					<table class="table table-bordered table-hover"
						   data-pagination="true"
						   data-side-pagination="client"
						   data-page-size="1">
						<thead>
						<tr class="success">
							<th style="background-color:#D1FDDE;text-align:center;border:none;"><input type="checkbox" id="checkAll" onclick="swapCheck()"  name="checkAll" /></th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">编号</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">用户名</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">密码</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">性别</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">用户住址</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">电话</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">用户余额</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">操作</th>
						</tr>
						</thead>
						<tbody>
						<tr th:each="user:${users}">
							<td style="text-align:center;"><input type="checkbox"  name="checkItem" th:value="${user.id}" /></td>
							<td th:text="${user.getId()}"></td>
							<td th:text="${user.getUsername()}"></td>
							<td th:text="${user.getPassword()}"></td>
							<td th:text="${user.getSex()}"></td>
							<td th:text="${user.getAddress()}"></td>
							<td th:text="${user.getTel()}"></td>
							<td th:text="${user.getBalance()}"></td>
							<td style="text-align:center;width: 150px;">
								<a type="button" class="btn btn-danger" style="float: left;margin-right: 5px;outline: none;" th:href="@{/manager/delete(id=${user.getId()})}">删除</a>
								<a type="button" class="btn btn-success"style="outline: none;" th:href="@{/manager/order_button(id=${user.getId()})}">订单</a>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</form>

				<!-- 分页信息 -->
			<div class="panel-footer" style="text-align: center;background-color: #F5FDF9;border: none;">
					<nav>
						<ul class="pagination pagination-sm">

							<li class="disabled">
								<a href="#" aria-label="Previous">
									<span aria-hidden="true">«</span>
								</a>
							</li>
							<li th:class="${now_page==page ? 'active':'nav-link'}" th:each="page:${pages}">
								<a th:href="@{/manager/page(page=${page})}" th:text="${page}"></a>
							</li>
							<li>
								<a href="#" aria-label="Next">
									<span aria-hidden="true">»</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>

		</div>

		</div>


	</body>
</html>